<template>
  <view class="approve">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y>
      <view class="form-2" v-if="status === '0'">
        <view class="form-item-title">
          <view class="title">
            <view class="text">证件照片上传</view>
            <view class="borderB"> </view>
          </view>
        </view>

        <!-- 身份证上传 -->
        <view class="form-item-logo">
          <view class="item">
            <view class="label"> 身份证照片上传 </view>
            <!-- <view class="support"> 支持上传jpg/png </view> -->

            <view class="file">
              <view @click="selectRx">
                <view class="fileList">
                  <view class="rx">
                    <image class="" :src="userInfo.frontUrl" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                      binderror="" bindload="" />
                    <text class="text"> 人像面 </text>
                  </view>
                </view>
              </view>
              <view @click="selectGh">
                <view class="fileList">
                  <view class="rx">
                    <image class="" :src="userInfo.backUrl" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                      binderror="" bindload="" />
                    <text class="text"> 国徽面 </text>
                  </view>
                </view>
              </view>
              <view @click="selectGh">
                <view class="fileList">
                  <view class="rx">
                    <image class="" :src="userInfo.backUrl" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                      binderror="" bindload="" />
                    <text class="text"> 手持证件照 </text>
                  </view>
                </view>
              </view>
            </view>
            <!-- <view @click="selectHl">
              <view class="fileList1">
                <view class="rx">
                  <image class="" :src="userInfo.handUrl" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                    binderror="" bindload="" />
                  <text class="text"> 手持证件照 </text>
                </view>
              </view>
            </view> -->
          </view>
        </view>
      </view>
      <view class="form" :class="marginTopStatus ? 'marginTopSty' : ''">
        <view class="form-item-title">
          <view class="title">
            <view class="text">确认身份信息</view>
            <view class="borderB"> </view>
          </view>
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 个人姓名 </view>
            <input type="text" placeholder="请输入姓名" :value="userInfo.name" @input="changeName"
              placeholder-style="color:#00000033;font-size:28rpx" />
          </view>
          <view class="line" />
        </view>
        <view class="form-item">
          <view class="item">
            <view class="label"> 身份证号 </view>
            <input type="idcard" placeholder="请输入身份证号" :value="userInfo.cardNo" @input="changeCarNo"
              placeholder-style="color:#00000033;font-size:28rpx" class="input" />
          </view>
          <view class="line" />
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 有效期限 </view>
            <view class="date" :class="userInfo.startDate ? 'activeDate' : ''">
              <picker mode="date" @change="changeStartDate">
                <view>{{ userInfo.startDate ? userInfo.startDate : '起始日期' }}</view>
              </picker>
            </view>
            <view class="date" :class="userInfo.endDate ? 'activeDate' : ''">
              <picker class="input" mode="date" @change="changeEndDate">
                <text>{{ userInfo.endDate ? userInfo.endDate : '结束日期' }}</text>
              </picker>
            </view>
          </view>
          <view class="line" />
        </view>
      </view>


      <!-- <view class="attention-text"> 注意事项 </view> -->
      <!-- ellipsis1 -->
      <!-- <view class="attention" v-if="status === '0'">
        1. 同一个身份证号只能认证一个账号；<br />
        2. 国徽面与正面信息应为同一身份证的信息且在有效期内；<br />
        3. 所有上传照片需清晰且未遮挡，请勿进行美化和修改；<br />
        4. 上传本人手持身份证信息面照片中应含有本人头部或上半身；<br />
        5. 手持身份证照中本人形象需为免冠且并未化妆，五官清晰；<br />
        6. 拍照手持身份证照时对焦点请置于身份证上，保证身份证信息清晰且未遮挡；<br />
        7. 所有上传信息均会被妥善保管，不会用于其他商业用途或传输给其他第三方<br />
      </view> -->

      <view class="submit" @click="handleSumit" v-if="submitStatus"> 提交 </view>
      <!-- <view v-else class="btn_inertia">已提交</view> -->

      <!-- 占位 -->
      <view style="height: 100rpx" />
    </scroll-view>
  </view>
</template>

<script>
import { getParam } from "@/api/common.js"
import { getAuth, addAuth } from "@/api/pages/mine.js"
import { getToken } from '@/utils/auth'
import { verifyIdCard } from '@/utils/toast'
import config from "../../../../../config";

export default {
  components: {},
  data() {
    return {
      styleData: {
        // background: "#232323",
        tabbarText: "实名认证",
        // color: "#ffffff",
        show: true,
      },
      userInfo: {
        name: '',
        cardNo: '',
        startDate: '',
        endDate: '',
        frontUrl: '../../../../static/images/approve/rx.png',
        backUrl: '../../../../static/images/approve/gh.png',
        handUrl: 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/05/08/8a516af6a95c4bc7b9306cbcd8be0128.png'
      },
      marginTopStatus: 0,
      submitStatus: true,
      status: ''
      // 上传
      // fileLists: {
      //  width: 64,
      //  height: 64,
      //  border: {
      //   radius: "50%",
      //  },
      // },
    };
  },
  computed: {
    dateTime() {
      if (this.userInfo.startDate && this.userInfo.endDate) {
        return this.userInfo.startDate + '至' + this.userInfo.endDate
      } else {
        return ''
      }
    },
  },
  mounted() { },
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { },
  mounted() {
    this.getAuthFun()
    getParam().then((res) => {
      console.log(res);
      this.status = res.data
    })
  },
  methods: {
    //封装上传图片到服务器
    getImgUrlFun(tempFilePaths, type) {
      uni.uploadFile({
        url: config.baseUrl + '/xcx/common/upload',
        filePath: tempFilePaths,
        name: 'file',
        header: {
          "token": getToken(),
        },
        success: (suc) => {
          const infoData = JSON.parse(suc.data)
          if (type === 1) {
            this.userInfo.frontUrl = infoData.data.url
          } else if (type === 2) {
            this.userInfo.backUrl = infoData.data.url
          } else {
            console.log(222, infoData);
            this.userInfo.handUrl = infoData.data.url
          }
        },
        fail: error => {
          console.log('失败', error);
        }
      })
    },
    // 获取上传状态
    selectRx() {
      uni.chooseMedia({
        count: 1,
        sourceType: ["album"], //从相册选择
        success: (chooseImageRes) => {
          console.log(chooseImageRes);
          if (chooseImageRes.tempFiles[0].size > 2097152) {
            uni.showToast({
              title: '图片不能超过2m,请重新选择',
              icon: 'none'
            })
            return
          }
          this.getImgUrlFun(chooseImageRes.tempFiles[0].tempFilePath, 1)
        }
      });
    },
    // 获取上传状态
    selectGh() {
      uni.chooseMedia({
        count: 1,
        sourceType: ["album"], //从相册选择
        success: (chooseImageRes) => {
          if (chooseImageRes.tempFiles[0].size > 2097152) {
            uni.showToast({
              title: '图片不能超过2m,请重新选择',
              icon: 'none'
            })
            return
          }
          this.getImgUrlFun(chooseImageRes.tempFiles[0].tempFilePath, 2)
        }
      });
    },
    // 获取上传状态
    selectHl() {
      uni.chooseMedia({
        count: 1,
        sourceType: ["album"], //从相册选择
        success: (chooseImageRes) => {
          this.getImgUrlFun(chooseImageRes.tempFiles[0].tempFilePath, 3)
        }
      });
    },
    // 输入框监听事件
    changeName(e) {
      this.userInfo.name = e.detail.value
      console.log(this.userInfo.name);
    },
    changeCarNo(e) {
      this.userInfo.cardNo = e.detail.value
    },
    // 时间字符转换时间戳
    getYearFun(dateVaule) {
      const newArr = dateVaule.split('-')
      if (this.userInfo.startDate && this.userInfo.endDate) {
        const timer = new Date(dateVaule)
        return timer
      }
      if (!this.userInfo.startDate) {
        uni.showToast({ title: '请选择起始日期', icon: 'none' })
        return
      }
      if (!this.userInfo.endDate) {
        uni.showToast({ title: '请选择结束日期', icon: 'none' })
        return
      }
    },
    // 选择日期
    changeStartDate(e) {
      this.userInfo.startDate = e.detail.value
      if (this.getYearFun(this.userInfo.startDate) > this.getYearFun(this.userInfo.endDate)) {
        this.userInfo.startDate = ''
        uni.showToast({ title: '起始日期不能大于结束日期', icon: 'none' })
      }
    },
    changeEndDate(e) {
      this.userInfo.endDate = e.detail.value
      const current = new Date()
      const endDate = Math.round(new Date(this.userInfo.endDate))
      if (current > endDate) {
        this.userInfo.endDate = ''
        uni.showToast({ title: '结束日期需在今天之后', icon: 'none' })
        return
      }
      if (this.getYearFun(this.userInfo.startDate) > this.getYearFun(this.userInfo.endDate)) {
        this.userInfo.endDate = ''
        uni.showToast({ title: '结束日期不能小于起始日期', icon: 'none' })
      } else {
        this.userInfo.endDate = e.detail.value
      }
    },
    getAuthFun() {
      getAuth().then((res) => {
        if (res.code === 200) {
          this.userInfo.name = res.data.name
          this.userInfo.cardNo = res.data.cardNo
          this.userInfo.frontUrl = res.data.frontUrl || this.userInfo.frontUrl
          this.userInfo.backUrl = res.data.backUrl || this.userInfo.backUrl
          this.userInfo.handUrl = res.data.handUrl || this.userInfo.handUrl
          this.userInfo.startDate = res.data.startDate
          this.userInfo.endDate = res.data.endDate
          if (res.data.state === '1') {
            this.submitStatus = false
          }
        }
      })
    },
    // 提交
    handleSumit() {
      console.log(this.name);
      if (verifyIdCard(this.userInfo.cardNo)) {
        addAuth({
          name: this.userInfo.name,
          cardNo: this.userInfo.cardNo,
          frontUrl: this.userInfo.frontUrl,
          backUrl: this.userInfo.backUrl,
          handUrl: this.userInfo.backUrl,
          startDate: this.userInfo.startDate,
          endDate: this.userInfo.endDate
        }).then((res) => {
          if (res.code === 200) {
            uni.showToast({ title: '提交成功' })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }
        })
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.approve {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: center;
  background-color: #f9f9f9;
  overflow: hidden;

  .scroll {
    position: relative;
    width: 700rpx;
    height: 100%;
    overflow: hidden;
    margin: 0 24rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .form {
      margin-top: 24rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 200rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 30%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }
    }

    .form-1 {
      margin-top: 24rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 200rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 30%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .input {
            font-size: 28rpx;
            color: #00000033;
          }

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }

      .form-item-logo {
        position: relative;

        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;

          margin-left: 24rpx;
          margin-right: 24rpx;

          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;

            margin-right: 40rpx;
          }

          .support {
            font-weight: 500;
            font-size: 22rpx;
            color: #00000073;
            letter-spacing: 0;
          }

          .file {
            margin-top: 26rpx;
            width: 654rpx;
            height: 406rpx;

            .image {
              width: 654rpx;
              height: 406rpx;
            }
          }
        }
      }
    }

    .form-2 {
      margin-top: 24rpx;
      width: 100%;

      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 200rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 30%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .input {
            width: 650rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }

      .form-item-logo {
        position: relative;

        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;

          margin-left: 24rpx;
          margin-right: 24rpx;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;

            margin-right: 40rpx;
          }

          .support {
            font-weight: 500;
            font-size: 22rpx;
            color: #00000073;
            letter-spacing: 0;
          }

          .file {
            margin-top: 26rpx;
            width: 654rpx;
            height: 260rpx;
            padding-bottom: 12rpx;
            display: flex;

            .image {
              width: 654rpx;
              height: 260rpx;
            }

            .fileList {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;

              .rx {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 322rpx;
                height: 260rpx;
                margin-right: 20rpx;

                image {
                  width: 100%;
                  height: 211rpx;
                }

                .text {
                  margin-top: 16rpx;
                  font-family: PingFangSC-Medium;
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #00000073;
                  letter-spacing: 0;
                }
              }

              .gh {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 322rpx;
                height: 260rpx;

                image {
                  width: 100%;
                  height: 211rpx;
                }

                .text {
                  margin-top: 16rpx;
                  font-family: PingFangSC-Medium;
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #00000073;
                  letter-spacing: 0;
                }
              }
            }
          }
        }
      }
    }

    .attention-text {
      display: flex;
      width: 112rpx;
      height: 40rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000e0;
      letter-spacing: 0;
      margin-top: 56rpx;
    }

    .attention {
      width: 702rpx;
      height: 240rpx;
      font-family: PingFang-SC-Bold;
      font-weight: 700;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
      line-height: 40rpx;
    }

    .submit {
      margin: 0 auto;
      width: 420rpx;
      margin-top: 180rpx;
      background: #ff9e24;
      border-radius: 44rpx;
      line-height: 88rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
    }

    .btn_inertia {
      margin: 0 auto;
      width: 420rpx;
      margin-top: 180rpx;
      height: 88rpx;
      background: #818181;
      border-radius: 44rpx;
      color: #fff;
      text-align: center;
      line-height: 88rpx;
      font-size: 32rpx;
    }
  }
}

.date {
  color: #00000033;
  margin-right: 40rpx;
  font-size: 28rpx;
}

.activeDate {
  color: #000000e0
}

.fileList1 {
  .rx {
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 322rpx;
      height: 211rpx;
    }

    .text {
      margin-top: 16rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
    }
  }
}
</style>
